<script setup lang="ts">
import { ArrowRight } from "@element-plus/icons-vue";

const BREADLIST = [
    { name: "用户中心", path: "#" },
    { name: "兑换记录", path: "#" },

];
</script>
<template>
    <el-breadcrumb :separator-icon="ArrowRight" class="pb-[12px]">
        <el-breadcrumb-item v-for="item in BREADLIST" :to="item.path">{{
            item.name
            }}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="w-full flex flex-col">
        <table class="min-w-full divide-y divide-gray-200 overflow-x-auto shadow-lg rounded-lg bg-white">
            <thead class="bg-gray-100">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">兑换时间</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">兑换商品</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">兑换数量</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2024-09-01</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">商品名称</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<style scoped>
</style>